<template>
    <div class="approve_detail" :class="{pb100:pageName=='待我审批的'}">
        <Header v-if="showHeader" :title="title"></Header>
        <div class="approve_opinion" v-if="pageName=='待我审批的'">
            <p>审批意见</p>
            <van-cell-group>
                <van-field 
                type="textarea" 
                rows="3"
                autosize 
                v-model="approveOpinion" 
                maxlength="1000"
                show-word-limit
                placeholder="请输入审批意见" />
            </van-cell-group>
        </div>
        <h2 v-else class="postponed_status">{{check_status}}</h2>
        <UserInfo :userInfo="userInfo" :fromPage="true"></UserInfo>
        <ApprovalStep :stepList="stepList" :activeStep="activeStep"></ApprovalStep>
        <van-tabbar :z-index="1000" v-if="pageName=='待我审批的'">
            <van-tabbar-item>
                <van-button size="normal" :disabled="approveOpinion.length<=0|| !approveOpinion" @click="submitApprove(1)">审批通过</van-button>
                <van-button size="normal" :disabled="approveOpinion.length<=0|| !approveOpinion" @click="submitApprove(2)">审批不通过</van-button>
            </van-tabbar-item>
        </van-tabbar>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import { submitCheckV3,detailV3 } from "@/request/api.js";
import UserInfo  from "@/components/business/UserInfo.vue";
import ApprovalStep from "@/components/business/ApprovalStep.vue";
import Header from "@/components/Header.vue";
import Loading from "@/components/Loading.vue";
export default {
    name:'ApproveDetail',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            title:'',
            showLoading:true,
            check_status:'',
            userInfo:{
                fd_sta_name:'',
                fd_jobs_name:'',
                fd_sta_mobile:'',
                fd_sta_photo:'',
                cycle_name:'',
                begin_date:'',
                end_date:'',
                score:'',
                history_alpply_num:'',
                targets:[],
                last_time:'',
                apply_title:'',
                remark:'',
                images:[],
            },
            static_image:[require('@/assets/images/morentouxiang.png')],
            approveOpinion:'',
            pageName:'',
            stepList:[],
            activeStep:0,
            apply_image:[require('@/assets/images/static_images.png')],
            id:''
        }
    },
    components:{
        UserInfo,
        ApprovalStep,
        Loading,
        Header
    },
    created(){
        this.pageName = this.$route.query.pageName;
        this.id = this.$route.query.id;
        console.log(this.pageName)
        console.log(this.id)
    },
    mounted(){
        detailV3({token:this.$store.state.token,id:this.id}).then(res=>{
            // console.log(res.data)
            if (res.code==0) {
                let data = res.data;
                this.title = data.apply_title;
                let check_status = data.check_status;
                console.log(data)
                switch (check_status) {
                    case '1':
                        this.check_status = '待市总审批';
                        break;
                    case '2':
                        this.check_status = '待区总审批';
                        break;
                    case '3':
                        this.check_status = '待商务总监审批';
                        break;
                    case '4':
                        this.check_status = '待老总审批';
                        break;
                    case '5':
                        this.check_status = '通过';
                        break;
                    case '6':
                        this.check_status = '逾期不通过';
                        break;
                    case '7':
                        this.check_status = '审批不通过';
                        break;
                    case '8':
                        this.check_status = '达标而作废';
                        break;
                    case '9':
                        this.check_status = '终止考核而作废';
                        break;
                    default:
                        break;
                };
                //用户基本信息
                this.userInfo.fd_sta_name = data.user_info.staffer_name;
                this.userInfo.fd_jobs_name = data.user_info.job_name;
                this.userInfo.fd_sta_mobile = data.user_info.phone;
                this.userInfo.fd_sta_photo = data.user_info.head_img;
                this.userInfo.cycle_name = data.cycle_name;
                this.userInfo.begin_date = data.begin_date;
                this.userInfo.end_date = data.end_date;
                this.userInfo.score = data.score;
                this.userInfo.history_alpply_num = data.history_alpply_num;
                this.userInfo.last_time = data.last_time;

                this.userInfo.apply_title = data.apply_title;
                data.images.length?this.userInfo.images = data.images:this.userInfo.images = [];
                // if (data.images.length) {
                //     this.userInfo.images = data.images;
                // }else{
                //     this.userInfo.images = this.apply_image;
                // }
                
                this.userInfo.remark = data.remark;
                //审批流
                this.stepList = data.check_log;
                // for(let i=0;i<this.stepList.length;i++){
                //     if(check_status==this.stepList[i].check_status){
                //         this.activeStep = i-1;
                //     }
                // }
                if (data.targets.length) {
                    for(let i = 0;i<data.targets.length;i++){
                        this.userInfo.targets[i] = data.targets[i];
                    }
                }
            } else {
                this.$toast({
                    message: res.msg,
                })
            }
            
            this.showLoading = false;
        }).catch(error=>{
            console.log(error)
            this.showLoading = false;
        })
    },
    methods:{
        //获取相对路径
        GetUrlRelativePath(url){
            let arrUrl = url.split("//");
            let start = arrUrl[1].indexOf("/");
            let relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符
    　　　　if(relUrl.indexOf("?") != -1){
    　　　　　　relUrl = relUrl.split("?")[0];
    　　　　}
    　　　　return relUrl;
    　　},
        submitApprove(type){
            this.showLoading = true;
            // console.log('通过')
            let id = this.$route.query.id;
            // let staffer_id = localStorage.getItem("staffer_id");
            if (type==2) {
                this.$dialog.confirm({
                    title: '提示',
                    message: '不通过后，该员工将被自动淘汰离职',
                    cancelButtonColor:'#ccc'
                }).then(() => {
                   submitCheckV3({token:this.$store.state.token,id:id,remark:this.approveOpinion,commit_type:type}).then(res=>{
                    // console.log(res)
                    this.showLoading = false;
                    if (res.code==0) {
                        this.$toast({
                            duration: 1000,
                            message:res.msg
                        });
                        const timer = setTimeout(()=>{
                            if (this.pageName == '待我审批的') {
                                this.$router.push({name:'accraditationDelay'})
                            } else {
                                this.$router.go(-1)
                            }
                        },500)
                        // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
                        this.$once('hook:beforeDestroy', () => {
                            clearInterval(timer);
                        })
                    }else{
                        this.$dialog.alert({
                            title:'提示',
                            message: res.msg
                        }).then(() => {
                            this.$router.go(-1)
                        });
                    }
                }).catch(error=>{
                    console.log(error)
                    this.showLoading = false;
                })
                }).catch(() => {
                    this.showLoading = false;
                    // on cancel
                }); 
            } else {
                submitCheckV3({token:this.$store.state.token,id:id,remark:this.approveOpinion,commit_type:type}).then(res=>{
                    // console.log(res)
                    this.showLoading = false;
                    if (res.code==0) {
                        this.$toast({
                            duration: 1000,
                            message:res.msg
                        });
                        const timer = setTimeout(()=>{
                            if (this.pageName == '待我审批的') {
                                this.$router.push({name:'accraditationDelay'})
                            } else {
                                this.$router.go(-1)
                            }
                        },500)
                        // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
                        this.$once('hook:beforeDestroy', () => {
                            clearInterval(timer);
                        })
                    }else{
                        this.$dialog.alert({
                            title:'提示',
                            message: res.msg
                        }).then(() => {
                            this.$router.go(-1)
                        });
                    }
                }).catch(error=>{
                    console.log(error)
                    this.showLoading = false;
                })
            };
        }
    },  
}
</script>
<style lang="less" scoped>
.pb100{padding-bottom: 100px;}
.approve_detail{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    .approve_opinion{
        width: 100%;
        height: auto;
        background: #fff;
        margin-bottom: 10px;
        padding: 10px 15px;
        box-sizing: border-box;
        color: #151617;
        font-size: 14px;
        p{
            line-height: 36px;
            font-weight: bold;
        }
        .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{border: none;}
        .van-cell{padding: 0;font-size: 14px;color: #999;}
    }
    .postponed_status{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        background: #02ccbd;
        padding: 0 15px;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
    /deep/ .van-tabbar-item__text{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    /deep/ .van-button--normal{
        font-size: 16px;
        font-weight: bold;
        background-color: #02ccbd;
        color: #fff;
        flex: 1;
    }
}
</style>